<template>
  <div class="login-form">
    <div>
    <a-form
      :model="formState"
      :rules="rules"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item name="username">
        <a-input v-model:value="formState.username" :maxlength="11" />
      </a-form-item>
  
      <a-form-item name="password">
        <a-input-password v-model:value="formState.password" />
      </a-form-item>
  
      <a-form-item>
        <a-button type="primary" html-type="submit" @click="handleLogin" :loading="loading">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
  </div>
  </template>
  <script setup>
    import { reactive, ref } from 'vue';
    // router
    import { useRouter } from "vue-router"
    // md5
    import md5 from "js-md5"
    // api
    import { login } from "@/api/account"
    // storage
    import { setToken } from "@/utils"
    const router = useRouter()
    const formState = reactive({
        username: '',
        password: '',
    });
    const loading = ref(false)
    const handleLogin = () => {
      
    }
    const onFinish = values => {
      loading.value = true
      login({
        ...formState,
        password: md5(formState.password)
        // qq111111 32位
      }).then(res => {
        setToken(res.content.token)
        router.push('/library')
        loading.value = false
      }).catch((error) => {
        loading.value = false
          console.log(error)
      })
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    const rules = {
      username: [{ required: true, message: '请输入手机号', trigger: 'change' }],
      password: [{ required: true, message: '请输入密码', trigger: 'change' }],
    };
  </script>
  <style lang="scss" scoped>
.login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  > div {
    width: 500px;
  }
}
.words-container {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	height: 650px;
	padding: 40px;
	border-radius: 60px 60px 0 0;
	margin-top: -60px;
	margin-bottom: 40px;
	&:after {
		content: "";
		position: absolute;
		left: 24px;
		right: 24px;
		bottom: 0;
		border-bottom: 1px solid #ccc;
	}
}
.block {
	height: 120px;
	background-color: #fff4de;
}
</style>